<template>
  <n-layout-sider
    bordered
    collapse-mode="width"
    :collapsed-width="64"
    :width="200"
    show-trigger="bar"
    :inverted="inverted"
  >
    <div class="logo" v-show="!menuState">
      <h2>放一个logo吧</h2>
    </div>
    <n-menu
      accordion
      :inverted="inverted"
      :collapsed-width="64"
      :collapsed-icon-size="22"
      :value="MenuItemVaule"
      :options="menuOptions"
      :collapsed="menuState"
      @update:value="selectMenuItem"
    />
  </n-layout-sider>
</template>

<script setup>
import { h, ref, onMounted, onBeforeMount } from "vue";
import { NIcon } from "naive-ui";
import {
  SettingsOutline,
  PersonOutline,
  ServerOutline,
  LibraryOutline,
  SpeedometerOutline,
  TvOutline,
  CopyOutline,
} from "@vicons/ionicons5";
import router from "../../router";

let inverted = ref(true);
let menuState = ref(false)

function renderIcon(icon) {
  return () => h(NIcon, null, { default: () => h(icon) });
}
let MenuItemVaule = ref(null);
const menuOptions = [
  {
    label: "工作台",
    key: "dashboard",
    icon: renderIcon(SpeedometerOutline),
  },
  {
    label: "访问资产",
    key: "resourceaccess",
    icon: renderIcon(TvOutline),
  },
  {
    label: "用户",
    key: "user",
    icon: renderIcon(PersonOutline),
    children: [
      {
        label: "用户管理",
        key: "userlist",
      },
      {
        label: "用户角色",
        key: "userrole",
      },
    ],
  },
  {
    label: "资产",
    key: "dev",
    icon: renderIcon(ServerOutline),
    children: [
      {
        label: "资产",
        key: "host",
      },
      {
        label: "资产组",
        key: "network",
      },
      {
        label: "应用",
        key: "service",
      },
    ],
  },
  {
    label: "账号",
    key: "account",
    icon: renderIcon(LibraryOutline),
    children: [
      {
        label: "改密计划",
        key: "changepwd",
      },
      {
        label: "改密规则",
        key: "pwdrole",
      },
      {
        label: "账号巡检",
        key: "pwdcheck",
      },
    ],
  },
  {
    label: "审计",
    key: "audit",
    icon: renderIcon(CopyOutline),
    children: [
      {
        label: "在线会话",
        key: "online",
      },
      {
        label: "字符会话",
        key: "tui",
      },
      {
        label: "图形会话",
        key: "gui",
      },
    ],
  },
  {
    label: "系统",
    key: "system",
    icon: renderIcon(SettingsOutline),
    children: [
      {
        label: "基本设置",
        key: "basicsystem",
      },
      {
        label: "授权管理",
        key: "license",
      },
      {
        label: "系统状态",
        key: "systemstat",
      }
    ],
  },
];

//点击菜单事件
function selectMenuItem(key, item) {
  console.log(key);
  router.push("/home/" + key);
  MenuItemVaule.value = key;
  window.localStorage.setItem("MenuItemVaule", key);
}

onMounted(() => {
  router.push(
    "/home/" +
    (window.localStorage.getItem("MenuItemVaule")
      ? window.localStorage.getItem("MenuItemVaule")
      : "dashboard")
  );
});

onBeforeMount(() => {
  // console.log(window.location.pathname)

  const paths = window.location.pathname.split("/");

  // console.log(paths)
  if (paths.length > 2) {
    window.localStorage.setItem("MenuItemVaule", paths[2]);
  }

  MenuItemVaule.value = window.localStorage.getItem("MenuItemVaule")
    ? window.localStorage.getItem("MenuItemVaule")
    : "dashboard";
});
</script>

<style scoped>
.logo {
  display: flex;
  height: 64px;
  align-items: center;
  text-align: center;
  padding-left: 30px;
}

.n-layout-sider {
  /* background: rgba(128, 128, 128, 0.3); */
  height: 100vh;
}
</style>